{% extends'case/base.html' %}

{#{% block styles %}#}
{#  {{ super() }}#}
{#  <link href="{{ url_for('static', filename='css/case/sql.css') }}" rel="stylesheet">#}
{#{% endblock styles %}#}

{% block div_case_up %}
<div class="row container-fluid pr-0 mr-0 pl-0 ml-0">
  <ul class="col-8 nav nav-pills" id="pills-main-tab-{{ case.id }}" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-basic-tab-{{ case.id }}" data-toggle="pill" href="#pills-basic-{{ case.id }}" role="tab">基本</a>
    </li>
{#    <li class="nav-item">#}
{#      <a class="nav-link" id="pills-advanced-tab-{{ case.id }}" data-toggle="pill" href="#pills-advanced-{{ case.id }}" role="tab">高级</a>#}
{#    </li>#}
  </ul>
  <div class="col-4 btn-toolbar d-flex justify-content-end pr-0 pb-1" role="toolbar">
    <div class="btn-group mr-2" role="group">
      <button id="btn-case-save-{{ case.id }}" type="button" class="btn btn-primary" data-case-id="{{ case.id }}">保存</button>
    </div>
    <div class="btn-group" role="group">
      <button id="btn-case-send-{{ case.id }}" type="button" class="btn btn-success" {{ 'disabled' if not case.id }} data-case-id="{{ case.id }}" >
        发送<span class="spinner-grow spinner-grow-sm" id="btn-case-send-spinner-{{ case.id }}" style="display: none;"></span>
      </button>
    </div>
  </div>
</div>
<div class="tab-content" id="pills-tabContent-main-{{ case.id }}">
  <div class="tab-pane fade show active" id="pills-basic-{{ case.id }}" role="tabpanel">
    <div class="card">
      <div class="card-body p-0">
        <label class="mb-0"><small>服务器</small></label>
        <div class="row">
          <div class="col-4 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-host-{{ case.id }}">主机名或IP地址</label>
            </div>
            <input id="input-host-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.host }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-port-{{ case.id }}">端口</label>
            </div>
            <input id="input-port-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.port }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-connect-timeout-{{ case.id }}">连接超时</label>
            </div>
            <input id="input-connect-timeout-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.connect_timeout }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-charset-{{ case.id }}">字符集</label>
            </div>
            <input id="input-charset-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.charset }}">
          </div>
          <div class="col-2 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="select-db-type-{{ case.id }}">数据库类型</label>
            </div>
            <select id="select-db-type-{{ case.id }}" class="form-control">
              <option {{ "selected" if case.specific_case.db_type == "MYSQL" }}>MySQL</option>
  {#            <option {{ "selected" if case.specific_case.db_type == "ORACLE" }}>Oracle</option>#}
            </select>
          </div>
        </div>
        <label class="mb-0"><small>登录</small></label>
        <div class="row">
          <div class="col-6 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-user-{{ case.id }}">用户名</label>
            </div>
            <input id="input-user-{{ case.id }}" type="text" class="form-control" value="{{ case.specific_case.user }}">
          </div>
          <div class="col-6 input-group input-group-sm">
            <div class="input-group-prepend">
              <label class="input-group-text" for="input-password-{{ case.id }}">密码</label>
            </div>
            <input id="input-password-{{ case.id }}" type="password" class="form-control" value="{{ case.specific_case.password }}">
          </div>
        </div>
        <label class="mb-0"><small>SQL</small></label>
        <div class="container-fluid ace-sql" id="div-ace-sql-{{ case.id }}">{{ case.specific_case.sql }}</div>
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-advanced-{{ case.id }}" role="tabpanel">
    <div class="card">
      <div class="card-body p-0">
        <p>高级内容</p>
      </div>
    </div>
  </div>
</div>
{% endblock div_case_up %}

{#{% block scripts %}#}
{#  {{ super() }}#}
{#  <script src="{{ url_for('static', filename='js/case/sql.js') }}"></script>#}
{#  <script>#}
{#      var data_expectations = {{ render_to_json(case.specific_case.expectations)|safe }};  // TODO 可能存在解析的问题#}
{#  </script>#}
{#{% endblock scripts %}#}